<template>
	<view>
		<view  @click="iseditable?choosephoto(0,0):''"   style="display: flex;flex-direction: row;align-items: center;padding: 5px 10px;" >
			<view style="height: 10px;width: 3px;background-color: #F55C23;display: flex;margin-left: -10px;margin-right: 7px;"></view> 
			<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;width: calc(100vw - 30px);">
				<view>{{title}}</view>
				<view v-if="iseditable && (maxCount>curCount)" style="display: flex; padding: 3px 5px;color: #fff;background-color: #F55C23;border-radius: 5px;">添加图片</view>
			</view>
		</view>
		<view style="display: flex;flex-direction: row;flex-wrap: wrap;">
		   <view   @click="showbigphoto(index2)"
					@longpress="iseditable?replacephoto(index2):''" 
					v-if="item2[1].opttype!='delete'" 
					v-for="(item2,index2) in data" 
					:key="index2" 
					style=' font-size: 13px; display:flex;position: relative;'>
				<image :src="item2[1].data[1].style.value"  
						@error="picerror(index2)"
						style="width: calc((100vw / 3) - 20px); height: calc((100vw / 3) - 20px);padding: 5px; "></image>
				<view  @click.stop="deletephoto(index2)" v-if="iseditable && curCount>1" style="position: absolute;top: 3px;right: 3px;color: #F55C23;background-color: #fff;border-radius: 50%; font-size: 18px;" class="iconfont icon-shanchu4"></view>
		   </view>
		</view>
	</view>
</template>


<script>
	export default {
		props:{
			data:{
				type:Array
			},
			opttype:{
				type:String
			}
		},
		
		computed:{
			iseditable:function(){
				return (this.opttype=='billedit'|| this.opttype=='billadd')
			},
			title:function(){
				return this.data[0][0].property.title
			},
			maxCount:function(){
				return this.data[0][0].property.maxCount
			},
			curCount:function(){
				var res = this.data.filter((val)=>{
					return val[0].opttype !== 'delete'
				})
				return res.length
			}
		},
		
		
		methods:{
			replacephoto(index2){
				var that = this
				uni.showModal({
					title: '提示',
					content: '是否替换该图片?',
					success: function (res) {
						if (res.confirm) {
							that.$options.methods.choosephoto1(that,index2)
							that.isreplace = true
						}
					},
				})
			},
			
			choosephoto1(that, index){
				var replacePicName = that.data[index][1].data[0].style.colValue
				var replacePicNameX = that.data[index][1].data[1].style.colValue
				uni.chooseImage({
					count: 1,
					sizeType: [ 'compressed'],
					sourceType: ['album','camera'],
					success: function(res) {
						var tempFilePaths = res.tempFilePaths
						const src = res.tempFilePaths[0]
						var productCode = uni.getStorageSync('productCode')
						var sessionId = uni.getStorageSync('sessionId')
						var projectCode = uni.getStorageSync('projectCode')
						var terminaltype = uni.getStorageSync('terminaltype')
						var dbId = uni.getStorageSync('dbId')
						var injson = '{"productCode":"' + productCode + '","terminalType":"' + terminaltype + '","projectCode":"' +
							projectCode + '","dbId":"","sessionId":"","replacePicName":"'+replacePicName+'","replacePicNameX":"'+replacePicNameX+'","replaceRename":true}';
						var injson2 = '{"uploadpath":"Asfiles/SCMDev/PIC"}'
						console.log(injson)
						uni.uploadFile({
							url: getApp().globalData.app_address + '?method=saas_UploadPic&parse=json&inJson='+injson,
							filePath: src,
							name: 'uploadfile',
							header: {'content-type': 'multipart/form-data'},
							formData: JSON.parse(injson2),
							success: function (res) {
								var data = JSON.parse(res.data)
								console.log(data)
								var picdata = data.data[0]
								var item = JSON.parse(JSON.stringify(that.data[index])) 
								item.forEach((val)=>{
									val.opttype = 'update'
									if(JSON.stringify(val.data) != '[]'){
										val.data.forEach((val2)=>{
											if(val2.name == 'filename'){
												val2.style.value = ''
												val2.style.colValue = picdata.fileAliasName
												val2.style.ismodified = true
											}else if(val2.name == "urlfilename"){
												val2.style.value = getApp().globalData.pic_address + picdata.fileAliasName
												val2.style.colValue = picdata.fileAliasName
												val2.style.ismodified = true
											}else if(val2.name == "urlfilenamex"){
												val2.style.value = getApp().globalData.pic_address + picdata.fileAliasNameX
												val2.style.colValue = picdata.fileAliasNameX
												val2.style.ismodified = true
											}else if(val2.name == "userfilename"){
												val2.style.value = ''
												val2.style.colValue = ''
												val2.style.ismodified = true
											}
										})
									}
									
								})		
								uni.$emit('updatedatapic',index,item)
							}
						})
					}
				});
			},
			
			choosephoto(){
				var that = this
				uni.chooseImage({
					count: 1,
					sizeType: [ 'compressed'],
					sourceType: ['album','camera'],
					success: function(res) {
						console.log(res)
						var tempFilePaths = res.tempFilePaths
						const src = res.tempFilePaths[0]
						var productCode = uni.getStorageSync('productCode')
						var sessionId = uni.getStorageSync('sessionId')
						var projectCode = uni.getStorageSync('projectCode')
						var terminaltype = uni.getStorageSync('terminaltype')
						var dbId = uni.getStorageSync('dbId')
						var injson = '{"productCode":"' + productCode + '","terminalType":"' + terminaltype + '","projectCode":"' +
							projectCode + '","dbId":"","sessionId":"","replacePicNameX":"","replaceRename":false}';
							var injson2 = '{"uploadpath":"Asfiles/SCMDev/PIC"}'
						console.log(injson)
						uni.uploadFile({
							url: getApp().globalData.app_address + '?method=saas_UploadPic&parse=json&inJson='+injson,
							filePath: src,
							name: 'uploadfile',
							header: {'content-type': 'multipart/form-data'},
							formData: JSON.parse(injson2),
							success: function (res) {
								var data = JSON.parse(res.data)
								console.log(data)
								var picdata = data.data[0]
								
								var item = JSON.parse(JSON.stringify(that.data[0])) 
								var size = that.data.length
								item.forEach((val)=>{
									val.opttype = 'insert'
									val.blockid = size
									if(JSON.stringify(val.data) != '[]'){
										val.data.forEach((val2)=>{
											val2.style.ismodified = true
											if(val2.name == 'filename'){
												val2.style.value = ''
												val2.style.colValue = picdata.fileAliasName
											}else if(val2.name == "urlfilename"){
												val2.style.value = getApp().globalData.pic_address + picdata.fileAliasName
												val2.style.colValue = picdata.fileAliasName
											}else if(val2.name == "urlfilenamex"){
												val2.style.value = getApp().globalData.pic_address + picdata.fileAliasNameX
												val2.style.colValue = picdata.fileAliasNameX
											}else if(val2.name == "zt"){
												val2.style.value = val2.style.initial
												val2.style.colValue = val2.style.initial
											}else if(val2.name == "uploadtype"){
												val2.style.value = val2.style.initial
												val2.style.colValue = val2.style.initial
											}else if(val2.name == "xh"){
												val2.style.value = that.curCount+1
												val2.style.colValue = that.curCount+1
											}else if(val2.name == "userfilename"){
												val2.style.value = ''
												val2.style.colValue = ''
											}
										})
									}
									
								})		
								that.data.push(item)
								uni.$emit('updatealldatapic',that.data)
							}
						})
					}
				});
			},
			
			showbigphoto(index){
				console.log(index)
				var tempres = this.data
				var urls = []
				tempres.forEach((val)=>{
					if(val[1].opttype != 'delete'){
						urls.push(val[1].data[0].style.value)
					}
				})
				console.log(urls)
				uni.previewImage({
					urls:urls,
					indicator:'default',
					current:index
				})
			
			},
			
			deletephoto(index2){
				var that = this
				var tempres = that.data[index2]
				uni.showModal({
					title: '提示',
					content: '是否确定删除?',
					success: function (res) {
						if (res.confirm) {
							var opttype = ''
							tempres.forEach((val)=>{
								if(val.opttype == 'insert'){
									opttype = 'insert'
								}else{
									val.opttype = 'delete'
								}
							})
							if(opttype!=''){
								that.data.splice(index2, 1)
								uni.$emit('updatealldatapic',that.data)
							}else{
								that.data[index2] = tempres
								var data = that.data
								var count = 0
								data.forEach((val)=>{
									var type = val[0].opttype
									if(type != 'delete'){
										count ++ 
										val[1].data[9].style.colValue = count
										val[1].data[9].style.ismodified = true
									}
									
								})
								uni.$emit('updatealldatapic',that.data)
							}
						}
					},
				})
			},
			
			picerror(index){
				var item = this.data[index]
				var itemdata = item[1].data
				itemdata[0].style.value = getApp().globalData.pic_address +"images/nbmt/no_photo.jpg";
				itemdata[1].style.value = getApp().globalData.pic_address +"images/nbmt/no_photo.jpg";
				item[1].data = itemdata
				uni.$emit('updatedatapic',index, item)
			}
		}
	}
</script>

<style>
</style>
